<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>编辑菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../../resources/lib/bui/css/dpl-min.css"
          th:href="@{/resources/lib/bui/css/dpl-min.css}"
          rel="stylesheet"/>
    <link href="../../../../resources/lib/bui/css/bui-min.css"
          th:href="@{/resources/lib/bui/css/bui-min.css}"
          rel="stylesheet"/>
    <script src="../../../../resources/lib/bui/js/jquery-1.8.1.min.js"
            th:src="@{/resources/lib/bui/js/jquery-1.8.1.min.js}"></script>
    <script src="../../../../resources/lib/bui/js/bui.js"
            th:src="@{/resources/lib/bui/js/bui.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.form.min.js"
            th:src="@{/resources/lib/jquery/jquery.form.min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.util.js"
            th:src="@{/resources/lib/jquery/jquery.util.js}"></script>
    <script src="../../../../resources/js/sps-js-util.js"
            th:src="@{/resources/js/sps-js-util.js}"></script>
    <style type="text/css">
        .icon-pkg, .icon-example, .task, .task-folder {
            background: url('http://img04.taobaocdn.com/tps/i4/T12.xMFiNXXXanXMzg-20-680.gif') no-repeat -999px -999px;
        }

        .icon-pkg {
            background-position: 0 0;
        }
    </style>
</head>
<body style="padding: 10px;">
<div id="topBtns">
    <button type="button" class="button button-primary" id="addBtn">添加菜单</button>
    <button disabled="true" class="button button-primary" type="button" id="delBtn">删除菜单</button>
    <button disabled="true" class="button button-primary" type="button" id="viewBtn">设置页面</button>
</div>
<div class="row" style="padding-top: 10px;">
    <div style="height: 200px;" id="acTreeContainer" th:class="${acListIsEmpty}?'hide span6':'span6'" >
        <div class="panel panel-head-borded panel-small span6" style="position: fixed;">
            <div id="tree">
            </div>
        </div>
    </div>
    <div class="span16">
        <div class="panel panel-head-borded panel-small">
            <form id="treeMenuForm" name="treeMenuForm" method="post" action="" th:action="@{/nh/system/treeMenuSetting/insertOrUpdate}" class="form-horizontal">
                <legend>基本信息</legend>
                <div class="row" style="display: none">
                    <div class="control-group span8">
                        <div class="controls">
                            <input name="id" id="id" type="text" class="input-normal control-text" value=""/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>菜单名称：</label>
                        <div class="controls">
                            <input name="menuName" id="menuName" type="text" class="control-text" data-rules="{required:true,maxlength:20,cardGroupRepeat:0}" maxlength="20" data-messages="{required:'名称输入不能为空'}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <!--<label class="control-label">通行门组1：</label>-->
                        <label class="control-label">上级菜单：</label>
                        <div class="controls">
                            <select name="parentId" id="parentId" data-rules="{repeat:1}">
                                <option value="0">无</option>
                                <option th:each="tm, stat:${tmList}"
                                        th:text="${tm.menuName}" th:value="${tm.id}" >
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <!--<label class="control-label">通行门组2：</label>-->
                        <label class="control-label">模板类型：</label>
                        <div class="controls">
                            <select name="modelCount" id="modelCount" data-rules="{repeat:1}">
                                <option value="0">无</option>
                                <option value="1">单窗口</option>
                                <option value="2">双窗口</option>
                                <option value="3">三窗口</option>
                                <option value="5">五窗口</option>
                            </select>
                        </div>
                    </div>
                </div>
                <legend></legend>
                <div class="row offset3">
                    <!--<div class="span13 offset3 ">-->
                    <button type="submit" class="button button-primary">保存</button>
                    <!--<button id = "reset" type="reset" class="button">重置</button>-->
                    <!--</div>-->
                </div>
            </form>
        </div>
    </div>
</div>

<script th:inline="javascript" type="text/javascript">

    //全局变量
    var tmTree = null; //硬件数据组件
    var tmStore = null; //硬件树数据缓存
    var tmForm = null; //区域控制器最大数量
    var selectStore = null; //硬件树数据缓存
    var currentTreeNodeId = "0"; //当前选中的树节点ID
    var BASE_URL = /*[[@{/}]]*/ '/'; //根目录


    /**
     * 页面初始化
     */
    $(function () {
        //树菜单数据加载
        BUI.use(['bui/tree', 'bui/data','bui/form','bui/select'], function (Tree, Data, Form,Select) {
            var data = /*[[${tmTree}]]*/ [];
            var tmList = /*[[${tmList}]]*/ [];
            tmStore = new Data.TreeStore({
                pidField: 'pid', //设置pid的字段名称
                data: data,
              //  url: "hardware/getTreeData",
                root: { id: '0', text: '1' }
            });

            //由于这个树，不显示根节点，所以可以不指定根节点
            tmTree = new Tree.TreeList({
                render: '#tree',
                height: 480,
                store: tmStore,
                itemTpl: '<li id="{value}">{text}</li>', //列表项的模板
                idField: 'value'
            });
            tmTree.render();

            //树节点单击打开对应的表单信息与页面控制
            tmTree.on('itemclick', function (ev) {
                var item = ev.item;
                currentTreeNodeId = item.id;
                if (item == undefined) {
                    return;
                }
                $("#parentId").attr("disabled",true);
                $.post(BASE_URL+"nh/system/treeMenuSetting/getTreeMenu",{ id: currentTreeNodeId  },function(data){
                    tmForm.clearErrors();
                    $('#treeMenuForm').setFormFields(data);
                });

                if(item.leaf&&item.id!=1){
                    $("#viewBtn").attr("disabled",false);
                    $("#modelCount").attr("disabled",false);
                    setDelBtnDis(false);
                }else{
                    $("#viewBtn").attr("disabled",true);
                    $("#modelCount").attr("disabled",true);
                    setDelBtnDis(true);
                }
            });

            tmForm = new Form.HForm({
                srcNode : '#treeMenuForm'
            }).render();

        });

        //注册添加区域控制器功能
        $("#addBtn").click(function () {
            $("#parentId").attr("disabled",false);
            $("#modelCount").attr("disabled",false);
            tmForm.clearErrors();
            tmForm.getField('menuName').clearCache();
            $('#menuName').val('');
            $('#modelCount').val('0');
            $('#parentId').val('0');
            $('#id').val('');
            tmTree.clearSelection();
            $("#viewBtn").attr("disabled",true);
            setDelBtnDis(true);
        });

        $('#viewBtn').click(function () {
            var count = $('#modelCount').val();
            if (count == 0) {
                BUI.Message.Alert('未选择模板类型');
            } else {
                // window.open (BASE_URL+'nh/template/template'+count+'.html', '页面设置', 'height=400, width=850, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
                window.open(BASE_URL + 'nh/template/template_setting?nodeId=' + currentTreeNodeId + '&modelCount=' + count, '页面设置', 'height=550, width=850,top=200, left=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
            }
        })

        //注册删除区域控制器功能
        $("#delBtn").click(function () {
            var selectTreeItem = tmTree.getSelected();
                BUI.Message.Confirm('是否确定删除菜单'+selectTreeItem.text,function(){
                    $.ajax({
                        url: /*[[@{/nh/system/treeMenuSetting/deleteTreeMenu/}]]*/'/',
                        type:'POST',
                        data:{id:selectTreeItem.id},
                        success:function(result){
                            if(result){
                                var node = tmTree.findNode('0');
                                tmStore.reloadNode(node);
                                tmStore.setResult(result);
                                tmForm.clearErrors();
                                tmForm.getField('menuName').clearCache();
                                $('#menuName').val('');
                                $('#modelCount').val('0');
                                $('#parentId').val('0');
                                $("#parentId").attr("disabled",false);
                                $("#modelCount").attr("disabled",false);
                                setDelBtnDis(true);
                                BUI.Message.Alert('已删除！',function(){},'info');
                                reloadSelect();
                            }
                        } ,
                        error:function(){alert('失败了！');}
                    });
                },'question');

        });
    });

    /**
     * 表单提交
     */
    $('#treeMenuForm').submit(function() {
        tmForm.valid();
            if(tmForm.isValid()){
                $('#parentId').attr("disabled",false);
                $('#modelCount').attr("disabled",false);
                $(this).ajaxSubmit({
                    dataType:  'json',
                    success: function showResponse(data)  {
                        var node = tmTree.findNode('0');
                        tmStore.reloadNode(node);
                        tmStore.setResult(data);
                        $('#menuName').val('');
                        $('#modelCount').val('0');
                        $('#parentId').val('0');
                        $("#parentId").attr("disabled",false);
                        $("#modelCount").attr("disabled",false);
                        reloadSelect();
                    }  // post-submit callback
                });
                return false;
            }
            else{
                return false;
            }
    });

    /**
     * 设置删除按钮是否可用
     * @param isDisabled
     *          true不可用，false可用
     */
    function setDelBtnDis(isDisabled){
        $("#delBtn").attr("disabled",isDisabled);
    }

    /**
     * 重新加载下拉框
     */
    function reloadSelect(){
        $.post(BASE_URL+"nh/system/treeMenuSetting/getParentTreeMenuList",function(data){
            $("#parentId option").remove();
            $("#parentId").append('<option value="0">无</option>');
            for(var i=0;i<data.length;i++){
                $("#parentId").append("<option value='"+data[i].id+"'>"+data[i].menuName+"</option>");
            }
        })
    }

</script>
</body>
</html>
